<template>
  <div class="curved_box" :style="{ width: width, height: height }">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
// 模块引入
//import { ref } from 'vue'
defineOptions({
  // 组件名称
  name: 'PaperComp',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})
interface IProps {
  width?: string
  height?: string
}
withDefaults(defineProps<IProps>(), {
  width: '200px',
  height: '248px'
})
</script>

<style scoped lang="scss">
.curved_box {
  display: inline-block;
  padding: 1em 0 2em;
  margin: 20px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.27),
    0 0 40px rgba(0, 0, 0, 0.06) inset;
  position: relative;
  zoom: 1;
  &::after,
  &::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 20%;
    bottom: 10px;
    z-index: -1;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  }
  &::after {
    transform: skew(15deg) rotate(6deg);
    right: 15px;
  }
  &::before {
    transform: skew(-15deg) rotate(-6deg);
    left: 15px;
  }
}
</style>
